<template>
  <div id="app">
    <router-view />
    <footer v-show="$route.meta.showNavBar">
      <nav-bar>
        <nav-bar-item :activeColor="'RoyalBlue'" :path="'/home'">
          <template v-slot:item-icon>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shouye"></use>
            </svg>
          </template>
          <template v-slot:item-text>
            <p>首页</p>
          </template>
        </nav-bar-item>
        <nav-bar-item :path="'/activity'">
          <template v-slot:item-icon>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-huodong"></use>
            </svg>
          </template>
          <template v-slot:item-text>
            <p>活动</p>
          </template>
        </nav-bar-item>
        <nav-bar-item :path="'/my'">
          <template v-slot:item-icon>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-wode"></use>
            </svg>
          </template>
          <template v-slot:item-text>
            <p>我的</p>
          </template>
        </nav-bar-item>
      </nav-bar>
    </footer>
  </div>
</template>
<script>
import navBar from "@/components/navbar/navBar.vue";
import navBarItem from "@/components/navbar/navBarItem.vue";

export default {
  components: {
    navBar,
    navBarItem,
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
a {
  color: 0;
  outline: none;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
<style lang="less" scoped>
#app {
  footer {
    position: absolute;
    width: 100%;
    height: 3.75rem;
    bottom: 0;
    border-top: 1px solid rgb(221, 218, 218);
  }
}
</style>
